<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 作业列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="jobVo.job.status" placeholder="作业状态" class="handle-select mr10">
                    <el-option key="e" label="进行中" value="e"></el-option>
                    <el-option key="d" label="已截止" value="d"></el-option>
                </el-select>
                <el-select v-model="jobVo.job.klassId" placeholder="班级">
                    <el-option v-for="item in klass" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select
                >&nbsp;
                <el-date-picker v-model="jobVo.job.findStartTime" type="date" placeholder="选择作业的开始日期" value-format="yyyy-MM-dd">
                </el-date-picker
                >&nbsp;至
                <el-date-picker v-model="jobVo.job.findEndTime" type="date" placeholder="选择作业的截至日期" value-format="yyyy-MM-dd">
                </el-date-picker
                ><br />
                <el-date-picker
                    v-model="jobVo.job.findSendStartTime"
                    type="date"
                    placeholder="选择发布作业的开始日期"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker
                >&nbsp;至
                <el-date-picker
                    v-model="jobVo.job.findSendEndTime"
                    type="date"
                    placeholder="选择发布作业的截至日期"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker
                >&nbsp; <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>&nbsp;
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="sendTime" label="发布时间"></el-table-column>
                <el-table-column prop="klass.name" label="班级"></el-table-column>
                <el-table-column prop="content" width="150" label="作业内容">
                    <template slot-scope="scope">
                        <div>
                            <a href="javascript:;" @click="goJobCheck(scope.row.id)">{{ scope.row.content }}</a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="submittedNum" width="80" label="已交人数"></el-table-column>
                <el-table-column prop="startTime" width="150" label="开始时间"></el-table-column>
                <el-table-column prop="endTime" width="150" label="截止时间"></el-table-column>
                <el-table-column label="作业状态" align="center">
                    <template slot-scope="scope">
                        <el-tag>
                            <span v-if="scope.row.status == 'e'">进行中</span>
                            <span v-if="scope.row.status == 'd'">已截止</span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.$index, scope.row, scope.row.id)"
                            >编辑</el-button
                        >
                        <el-button type="text" icon="el-icon-document" @click="handleEdit(scope.$index, scope.row, scope.row.id)"
                            >查看作业图片</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalPages"
                    :current-page="currentPage"
                    @current-change="handlePageChange($event)"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 作业图片弹出框 -->
        <el-dialog title="作业图片" :visible.sync="editVisible" width="30%">
            <div class="images">
                <div v-for="(item, index) in info" :key="index" class="image-middle">
                    <el-card shadow="hover" :body-style="{ padding: '10px' }">
                        <el-popover>
                            <img :src="info[index].url" slot="reference" class="image" />
                            <img :src="info[index].url" class="imagePreview" />
                        </el-popover>
                    </el-card>
                </div>
            </div>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑作业" :visible.sync="updateVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="班级">
                    <el-select v-model="form.klassId" placeholder="请选择">
                        <el-option v-for="item in klass" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始日期">
                    <el-date-picker
                        v-model="form.startTime"
                        type="date"
                        placeholder="选择作业的开始日期"
                        :picker-options="pickerOptions0"
                        value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="截止日期">
                    <el-date-picker
                        v-model="form.endTime"
                        type="date"
                        placeholder="选择作业的截止日期"
                        :picker-options="pickerOptions1"
                        value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="作业内容">
                    <el-input type="textarea" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="作业图片">
                    <el-upload
                        action="http://192.168.12.95:8080/job/admin/upload"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-success="imgSuccess1"
                        :on-error="imgError1"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :headers="token"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    name: 'basetable',
    data() {
        return {
            jobVo: {
                job: {
                    status: null,
                    findStartTime: null,
                    findEndTime: null,
                    findSendStartTime: null,
                    findSendEndTime: null,
                    klassId: null
                },
                page: 1
            },
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            job: {
                id: '',
                startTime: '',
                endTime: '',
                content: '',
                jobPhotos: []
            },
            tableData: [],
            totalPages: null,
            currentPage: null,
            multipleSelection: [],
            delList: [],
            editVisible: false,
            updateVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            token: '',
            info: [],
            klass: [],
            pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2) {
                        return time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    if (this.value2) {
                        return time.getTime() < this.value1;
                    }
                    return time.getTime() < Date.now();
                }
            }
        };
    },
    created() {
        this.$axios.get('/job/admin/job/getTeachClass').then((r) => {
            console.log(r);
            if (r.data.code == 200) {
                this.klass = r.data.data;
                console.log(this.klass);
            } else if (r.data.code == 403) {
            }
        });
        this.getList();
        this.token = {
            token: localStorage.getItem('token')
        };
    },
    methods: {
        //初始化列表
        getList() {
            this.$axios.post('/job/admin/job/list', this.jobVo).then((r) => {
                if (r.data.code == 200) {
                    this.tableData = r.data.data.pageBean.data;
                    this.totalPages = r.data.data.pageBean.totalPages * 10;
                    this.currentPage = r.data.data.pageBean.currPage;
                    console.log(r.data.data.pageBean.totalPages);
                } else if (r.data.code == 403) {
                }
            });
        },
        // 触发搜索按钮
        handleSearch() {
            console.log(this.currentPage);
            this.jobVo.page = this.currentPage;
            this.getList();
        },
        // 作业详情
        handleEdit(index, row, id) {
            this.$axios.get('/job/admin/job/detail/' + id).then((r) => {
                console.log(r);
                if (r.data.code == 200) {
                    console.log(r.data.data.jobPhotos);
                    this.info = r.data.data.jobPhotos;
                } else if (r.data.code == 403) {
                }
            });
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },
        //编辑作业
        handleUpdate(index, row, id) {
            this.$axios.get('/job/admin/job/detail/' + id).then((r) => {
                console.log(r);
                if (r.data.code == 200) {
                    this.jobPhotos = r.data.data.jobPhotos;
                    this.fileList = this.jobPhotos;
                } else if (r.data.code == 403) {
                }
            });
            this.idx = index;
            this.form = row;
            this.updateVisible = true;
        },
        // 分页导航
        handlePageChange(currentPage) {
            this.jobVo.page = currentPage;
            this.getList();
        },
        //删除图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.fileList = fileList;
        },
        //放大图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 上传成功
        imgSuccess1(res, file, fileList) {
            this.fileList = fileList;
        },
        // 上传失败
        imgError1(res) {
            this.$message({
                type: 'error',
                message: '附件上传失败'
            });
        },
        //修改作业
        saveEdit() {
            console.log(this.form);
            this.job.startTime = this.form.startTime;
            this.job.endTime = this.form.endTime;
            this.job.content = this.form.content;
            this.job.id = this.form.id;
            this.job.klassId = this.form.klassId;
            this.job.jobPhotos.length = 0;
            for (let i = 0; i < this.fileList.length; i++) {
                if (this.fileList[i].response == undefined) {
                    let img = {
                        url: this.fileList[i].url
                    };
                    this.job.jobPhotos.push(img);
                    console.log(img);
                } else {
                    let img = {
                        url: this.fileList[i].response.data
                    };
                    this.job.jobPhotos.push(img);
                    console.log(img);
                }
            }
            console.log(this.job);
            this.$axios.post('/job/admin/job/update', this.job).then((r) => {
                console.log(r);
                if (r.data.code == 200) {
                    this.updateVisible = false;
                    this.$message.success('成功修改作业！');
                    location.reload();
                } else {
                    this.$message.error('作业修改失败了，请过会再试！');
                }
            });
        },
        //跳转改作页审批页面
        goJobCheck(id) {
            this.$router.push({
                path: '/jobcheck',
                query: {
                    id: id
                }
            });
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
/* 图片总布局，样式 */
.images {
    display: flex;
    margin-top: 20px;
    margin-left: 21px;
    margin-right: 20px;
    flex-wrap: wrap;
}
/* 图片之间 */
.image-middle {
    margin-right: 15px;
    margin-bottom: 15px;
}
/* 单张图片样式 */
.image {
    width: 110px;
    height: 110px;
}
</style>
